<template>
    <view>
        <view class="top flex_wrap row_middle">
            <u-skeleton
                rows="1"
                :title="false"
                :rowsWidth="['100%']"
                :rowsHeight="['26px']"
                :loading="loading"
            >
                <view class="flex_wrap">
                    <u-text
                        :text="`提交人:${detailData.submitManName}`"
                        color="#588BF3"
                        size="32rpx"
                    />
                    <u-text
                        :text="constansCheckState[detailData.checkState]"
                        :color="
                            detailData.checkState == 2 ? '#588BF3' : '#FF6F6F'
                        "
                        align="right"
                        size="32rpx"
                    />
                </view>
            </u-skeleton>
        </view>
        <u-gap height="14rpx" bgColor="#F5F5F5" v-if="!loading" />
        <view class="form">
            <u-skeleton
                rows="9"
                :title="false"
                :rowsWidth="[
                    '100%',
                    '100%',
                    '100%',
                    '100%',
                    '100%',
                    '100%',
                    '100%',
                    '100%',
                    '100%',
                ]"
                :rowsHeight="[
                    '26px',
                    '26px',
                    '26px',
                    '26px',
                    '26px',
                    '26px',
                    '26px',
                    '26px',
                    '26px',
                ]"
                :loading="loading"
            >
                <u-form
                    labelPosition="left"
                    :model="detailData"
                    :rules="rules"
                    ref="form"
                    :labelStyle="labelStyle"
                    labelWidth="160rpx"
                >
                    <u-form-item
                        label="会议主题"
                        :customStyle="formItemCustomStyle"
                        borderBottom
                        prop="theme"
                    >
                        <u-text :text="detailData.theme" align="right" />
                    </u-form-item>
                    <u-form-item
                        label="讲师"
                        :customStyle="formItemCustomStyle"
                        borderBottom
                        prop="theme"
                    >
                        <u-text :text="detailData.lecturer" align="right" />
                    </u-form-item>

                    <u-form-item
                        label="开始时间"
                        :customStyle="formItemCustomStyle"
                        borderBottom
                        prop="startSubmitTime"
                    >
                        <uni-datetime-picker
                            v-model="detailData.startTime"
                            hide-second
                            @change="startTimeChange"
                            disabled
                        >
                            <u-text
                                align="right"
                                :iconStyle="iconStyle"
                                color="#666"
                                size="28rpx"
                                :text="
                                    $u.timeFormat(
                                        detailData.startTime,
                                        'yyyy-mm-dd hh:MM'
                                    )
                                "
                            />
                        </uni-datetime-picker>
                    </u-form-item>

                    <u-form-item
                        label="结束时间"
                        :customStyle="formItemCustomStyle"
                        borderBottom
                        prop="endSubmitTime"
                    >
                        <uni-datetime-picker
                            v-model="detailData.endTime"
                            hide-second
                            @change="endTimeChange"
                            disabled
                        >
                            <u-text
                                align="right"
                                :iconStyle="iconStyle"
                                color="#666"
                                size="28rpx"
                                :text="
                                    $u.timeFormat(
                                        detailData.endTime,
                                        'yyyy-mm-dd hh:MM'
                                    )
                                "
                            />
                        </uni-datetime-picker>
                    </u-form-item>

                    <u-form-item
                        label="地址"
                        :customStyle="formItemCustomStyle"
                        borderBottom
                    >
                        <u-text
                            align="right"
                            :iconStyle="iconStyle"
                            color="#666"
                            size="28rpx"
                            :text="`${detailData.addressName || ''}${
                                detailData.address
                            }`"
                        />
                    </u-form-item>
                    <u-form-item
                        label="业务归属"
                        :customStyle="formItemCustomStyle"
                        borderBottom
                        prop="businessAffiliation"
                    >
                        <u-text
                            :text="detailData.businessAffiliation"
                            align="right"
                        />
                    </u-form-item>
                    <u-form-item
                        label="主办方"
                        :customStyle="formItemCustomStyle"
                        borderBottom
                        prop="organizer"
                    >
                        <u-text :text="detailData.organizer" align="right" />
                    </u-form-item>
                    <u-form-item
                        label="负责人"
                        :customStyle="formItemCustomStyle"
                        borderBottom
                        prop="organizer"
                    >
                        <u-text
                            :text="`${detailData.organizerPerson}(${detailData.organizerPhone})`"
                            align="right"
                        />
                    </u-form-item>
                    <u-form-item
                        label="签到限制"
                        :customStyle="formItemCustomStyle"
                        borderBottom
                        prop="verifyType"
                    >
                        <u-radio-group
                            v-model="detailData.verifyType"
                            placement="row"
                            @change="groupChange"
                        >
                            <u-radio
                                name="0"
                                label="不限制"
                                :customStyle="{ marginRight: '8px' }"
                            ></u-radio>
                            <u-radio name="1" label="定位限制"></u-radio>
                        </u-radio-group>
                    </u-form-item>
                    <u-form-item
                        label="报名范围"
                        :customStyle="formItemCustomStyle"
                        ><u-text
                            :text="constansAppointType[detailData.appointType]"
                            align="right"
                    /></u-form-item>

                    <view
                        class="customClass"
                        v-if="detailData.appointType === '2'"
                    >
                        <view class="chooseList">
                            <view
                                style="
                                    margin-right: 14rpx;
                                    margin-bottom: 20rpx;
                                "
                                v-for="(
                                    chooseItem, index
                                ) in detailData.meetingAppointList"
                                :key="index"
                            >
                                <u-tag
                                    size="mini"
                                    bgColor="#588BF3"
                                    :name="index"
                                    :text="chooseItem.salesmanName"
                                />
                            </view>
                        </view>
                    </view>

                    <view class="flex_wrap">
                        <u-button
                            text="撤销"
                            shape="circle"
                            :hairline="false"
                            :customStyle="buttonCustomStyle"
                            @click="revokeHandler"
                            v-if="
                                (detailData.checkState == '0' ||
                                    (detailData.checkState == '1' &&
                                        detailData.meetState == '1')) &&
                                String(detailData.submitManId) ===
                                    String(userInfo.id)
                            " />
                        <u-button
                            text="通过"
                            shape="circle"
                            :hairline="false"
                            :customStyle="buttonCustomStyle"
                            @click="adopt"
                            v-if="
                                detailData.checkState == '0' &&
                                String(detailData.submitManId) ===
                                    String(userInfo.id)
                            "
                    /></view>
                </u-form>
            </u-skeleton>
        </view>
    </view>
</template>

<script>
import {
    getMeetDetailByMeetId,
    revokeMeet,
    getCheckMeet,
    updateMeetVerifyType,
} from "@/api/salesmanMeeting.js";
import uniDatetimePicker from "../components/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue";

import { mapGetters } from "vuex";
export default {
    components: {
        uniDatetimePicker,
    },
    computed: mapGetters(["userInfo"]),
    data() {
        return {
            loading: true,
            constansCheckState: {
                0: "审核中",
                1: "审核通过",
                2: "审核不通过",
                3: "已撤销",
            },
            constansAppointType: {
                0: "所有人",
                1: "我的下级",
                2: "指定下级",
            },
            buttonCustomStyle: {
                color: "#FFF",
                backgroundColor: "#588BF3",
                marginTop: "10rpx",
            },

            indexSearchKeyword: "",
            indexedChoosed: {},
            searchHeight: uni.upx2px(64),
            scopeList: [
                {
                    value: 0,
                    label: "所有人",
                },
                {
                    value: 1,
                    label: "全部下级",
                },
                {
                    value: 2,
                    label: "指定下级",
                },
            ],

            scopeList: [
                {
                    value: 0,
                    label: "所有人",
                },
                {
                    value: 1,
                    label: "全部下级",
                },
                {
                    value: 2,
                    label: "指定下级",
                },
            ],
            labelStyle: {
                fontSize: "28rpx",
                color: "#333",
                fontWeight: "bold",
            },
            formItemCustomStyle: {
                padding: "32rpx 0",
            },
            formItemCustomStyle2: {
                padding: "0",
            },
            customInputStyle: {
                backgroundColor: "#F3F3F3",
                height: "80rpx",
                borderRadius: "20rpx",
            },
            iconStyle: "fontSize:28rpx",
            // model: {
            // 	theme: 'xxx', //主题
            // 	startTime: '',
            // 	endTime: '',
            // 	startSubmitTime: '2021-2-12 12:12', //开始时间
            // 	endSubmitTime: '2021-2-12 12:12', //结束时间
            // 	illegalPlace: 'xxxx', //地址
            // 	detailPlace: 'xxxx',
            // 	latitude: '', //经度
            // 	longitude: '', //纬度
            // 	scopeValue: 2,
            // 	chooseList: [{ name: 'xxx' }]
            // },
            detailData: {},
            rules: {},
            meetId: null,
        };
    },
    onLoad(options) {
        this.loading = true;
        this.meetId = options.meetId;
        uni.$u.sleep(400).then(() => {
            this.getMeetDetail(this.meetId);
        });
    },
    // onUnload: function() {
    // 	const that = this;
    // 	//判断页面栈里面的页面数是否大于 2
    // 	if (getCurrentPages().length > 2) {
    // 		//获取页面栈
    // 		let pages = getCurrentPages();
    // 		//给上一个页面设置状态
    // 		let curPage = pages[pages.length - 2];
    // 		let data = curPage.data;
    // 		// curPage.setData({ isBack: true });
    // 		curPage.$vm._data.isBack = true;
    // 	}
    // },
    created() {
        this.formatScopeList();
    },
    methods: {
        getMeetDetail(meetId) {
            getMeetDetailByMeetId(meetId)
                .then((res) => {
                    res.data.verifyType = res.data?.verifyType ?? "0";
                    this.detailData = res.data;
                    this.loading = false;
                })
                .finally(() => {
                    this.loading = false;
                });
        },
        revokeHandler() {
            const that = this;
            uni.showModal({
                content: "确认撤销该会议",
                showCancel: true,
                success({ confirm, cancel }) {
                    if (confirm) {
                        revokeMeet(that.meetId).then((res) => {
                            uni.$u.toast("撤销成功!");
                            that.getMeetDetail(that.meetId);
                        });
                    }
                },
            });
        },
        adopt() {
            const that = this;
            this.checkState = 1;
            uni.showModal({
                content: "确认通过该会议",
                success({ confirm, cancel }) {
                    if (confirm) {
                        getCheckMeet(that.meetId, that.checkState).then(
                            (res) => {
                                uni.$u.toast("会议审核通过");
                                that.getMeetDetail(that.meetId);
                            }
                        );
                    }
                },
            });
        },
        indexedChooseHandler(e) {
            this.indexedChoosed = e;
        },
        openIndexedListHandler() {
            this.showIndexedList = true;
        },
        close() {
            this.showIndexedList = false;
        },
        scopeClick(scope) {},
        formatScopeList() {
            this.scopeList.forEach((item) => {
                item.isActive = false;
            });
        },
        async groupChange(n) {
            const { code, data } = await updateMeetVerifyType({
                meetId: this.meetId,
                verifyType: n,
            });
            if (code === 200) uni.$u.toast(data);
        },

        startTimeChange(e) {
            console.log(e);
        },
        endTimeChange(e) {},
    },
};
</script>

<style>
page {
    background-color: #fff !important;
}
</style>

<style lang="scss" scoped>
.top {
    width: 100%;
    height: 108upx;
    padding: 0 30upx;
}

.form {
    padding: 0 38upx;
}

::v-deep.placeHolder {
    color: #666 !important;
    font-size: 28upx !important;
}

.radioGroupBox {
    display: flex;
    align-items: center;
}

.customClass {
    ::v-deep.u-form-item__body {
        flex-direction: column !important;
    }

    .chooseList {
        margin-top: 30upx;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        margin-right: 20rpx;
    }
}

.scopeList {
    width: 100%;
    height: 80upx;
    align-items: center;
    border-bottom: 1px solid #f3f3f3;

    .scopeLable {
        font-size: 28rpx;
        color: #666;
    }

    .activeColor {
        color: #588bf3;
    }
}

.scopeList:first-of-type {
    height: auto;
    padding-bottom: 20upx;
}

.scopeList:last-of-type {
    border-bottom: none;
}

.indexBox {
    width: 100vw;

    .searchBox {
        width: 100vw;
        padding: 20upx 80upx 20upx 20upx;
    }

    .listBox {
        position: relative;
    }
}
</style>
